<template>
    <div id="app">
        <div>
            <div style="margin: 10px 0">
                <!--搜索栏-->
                <el-form :inline="true" :model="NoticeSearchForm" class="demo-form-inline">
                    <el-form-item label="名称">
                        <el-input v-model="NoticeSearchForm.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <el-date-picker
                            v-model="NoticeSearchForm.date"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                    >
                    </el-date-picker>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="warning" @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>

            </div>

            <div style="margin: 10px 0">
                <el-button type="primary" @click="addNotice">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
            </div>

            <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'">
                <el-table-column prop="id" label="编号" width="80"></el-table-column>
                <el-table-column prop="title" label="标题"></el-table-column>
                <el-table-column prop="content" label="内容">
                    <template v-slot="scope">
                        <el-button type="primary" @click="view(scope.row.content)">查看内容</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="发布时间"></el-table-column>
                <el-table-column prop="author" label="发布人"></el-table-column>
                <el-table-column prop="click" label="点击量"></el-table-column>
                <el-table-column prop="uppid" label="置顶">
                    <template slot-scope="scope">
                        <el-tag type="success" effect="dark" v-if="scope.row.uppid=='0'">未置顶</el-tag>
                        <el-tag type="danger" effect="dark" v-if="scope.row.uppid=='1'">置顶</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" @click="editEmp(scope.row)">修改</el-button>
                        <el-button type="danger" @click="deleteById(scope.row)" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <div style="padding: 10px 0">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
            <!--修改弹框-->
            <el-dialog title="信息" :visible.sync="dialogFormVisible" width="60%" :close-on-click-modal="false">
                <el-form label-width="100px" size="small" style="width: 90%" :model="editForm" ref="addFormRef">
                    <el-form-item label="标题">
                        <el-input v-model="editForm.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="内容">
                        <el-input type="textarea" v-model="editForm.content" :autosize="{ minRows: 4}" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmUpdate">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 添加弹框-->
            <el-dialog title="添加信息" :visible.sync="dialogFormVisible2" width="60%" :close-on-click-modal="false">
                <el-form label-width="100px" size="small" style="width: 90%" :model="addForm" ref="addFormRef">
                    <el-form-item label="标题">
                        <el-input v-model="addForm.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="内容">
                        <el-input type="textarea" v-model="addForm.content" :autosize="{ minRows: 4}" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="发布人">
                        <el-input v-model="addForm.author" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="发布时间">

                        <el-date-picker
                                v-model="addForm.time"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="confirmAdd">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="内容" :visible.sync="dialogFormVisible1" width="60%" :close-on-click-modal="false">
                <el-card>
                    <pre style="line-height: 28px; word-wrap: break-word;white-space: pre-wrap;"><div v-html="content"></div></pre>
                </el-card>
            </el-dialog>
        </div>


    </div>
</template>

<script>
    export default {
        name: "noticeList",
        data(){
            return{
                tableData: [],
                total: 0,
                currentPage: 1,
                pageSize: 5,
                title: "",
                date:[],
                dialogFormVisible: false,
                dialogFormVisible1: false,
                dialogFormVisible2:false,
                content:"",
                value: '',
                editForm:{},
                addForm:{},
                NoticeSearchForm:{},
                author:'',
            }
        },
        created(){
            this.currentPage=1;
            this.initTable();
            this.initUser();
        },
        methods: {
            //搜索查询
            onSubmit(){
                this.currentPage=1;
                this.initTable();
            },

            //添加
            addNotice(){
                this.dialogFormVisible2 = true;
                this.addForm={};
                this.addForm.author = this.author;

            },

            confirmAdd(){
                this.$http.post("/notice/addNotice",this.addForm).then(result=>{
                    if(result.data.code===200) {
                        this.$message({
                            showClose: true,
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });

                        this.dialogFormVisible2 = false;
                        this.initTable();
                    }
                });
            },

            //初始化用户信息
            initUser(){
                this.$http.get("/login/loginAdmin").then(result=>{
                    if(result.data.code === 200){
                        this.author = result.data.data.name;
                    }
                })
            },

            //修改
            editEmp(row){
                this.dialogFormVisible = true;
                this.editForm=row;
            },

            confirmUpdate(){
                this.$http.post("/notice/updateNotice",this.editForm).then(result=>{
                    if(result.data.code===200){
                        this.$message({
                            showClose: true,
                            message: '恭喜你，修改成功',
                            type: 'success'
                        });

                        this.dialogFormVisible = false;
                        this.initTable();
                    }
                });
            },


            reset() {
                this.NoticeSearchForm={}
                this.initTable();
            },
            //分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.initTable();
            },


            //删除公告
            deleteById(row){
                this.$http.get("/notice/deleteById?id="+row.id).then(result=>{
                    if(result.data.code===200){
                        this.$message({
                            showClose: true,
                            message: '恭喜你，删除成功',
                            type: 'success'
                        });
                        this.currentPage=1;
                        this.initTable();
                    }

                });
            },

            view(content) {
                this.content = content;
                this.dialogFormVisible1 = true;
            },
            initTable(){
                this.$http.post("/notice/noticeList?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.NoticeSearchForm).then(resp=>{
                    this.tableData=resp.data.data.list;
                    this.total=resp.data.data.total;
                });
            },
        }
    }
</script>

<style scoped>
    .headerBg {
        background: #eee!important;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>